<template>
  <!-- 集中器抄表记录  zuofei -->
  <div class="FlConMeterInfo">
    <!-- <searchComponentsCss
              :searchData="searchData"
              :optionsZi="optionsZi"
              :searchOptionTable="searchOptionTable"
              @searchCallBack="searchCallBack"
      ></searchComponentsCss> -->
    <!-- :shrinkBoxOpenClose='shrinkBoxOpenClose' -->
    <!-- 搜索框-->

    <!-- <rightButtons
                style="float:right;padding:10px;margin-right:20px"
                @sunS_F='sunS_F'
                @emptySearch='emptySearch'
                @configuration='configuration'
                class="right_buttons"
        ></rightButtons> -->

    <!-- 表格 -->
    <div class="out">
      <!--数据列表-->
      <!-- 字典 -->
      <dictionaries :searchData='searchData' :modelType='modelType' @optionData="dictionariesCallBack"></dictionaries>
      <el-table ref="multipleTable" :data="dataAttribute" v-loading.body="false" border fit highlight-current-row size="mini" max-height="511px" :cell-style="{padding:'5px 0'}" @selection-change="handleSelectionChange">
        <el-table-column align="center" type="selection" :show-overflow-tooltip="true" width="45"></el-table-column>
        <!-- <el-table-column
                align="center"
                label="序号"
                type="index"
                :index="indexMethod"
                width="54"
        >
        </el-table-column> -->
        <el-table-column align="center" v-for="item in searchData" v-if="item.tableSign" :key="item.id" :label="item.CN" :show-overflow-tooltip="true" min-width="140px">
          <template slot-scope="scope">{{item.type === 'select' ? optionDatas(item.typeGroupCode?optionsZi[item.EN]:searchOptionTable[item.EN],scope.row[item.EN]):scope.row[item.EN]}}</template>
        </el-table-column>
        <!-- <el-table-column align="center" label="操作" width="280px" fixed="right">
          <template slot-scope="scope" class="do">
            <el-button
                    style="color:#0B9AC3;border:none;"
                    icon="el-icon-view"
                    circle
                    @click="makeExaId(scope.row.id)"
            ></el-button>
            <modificationi
                    class="inline_block"
                    :attributeOrder="searchData"
                    :optionsZi="optionsZi"
                    :searchOptionTable="searchOptionTable"
                    :modData="scope.row"
                    @modifyData="modifyData"
            ></modificationi>
            <el-button
                    style="color:#C90010;border:none;"
                    icon="el-icon-delete"
                    circle
                    @click="deleteList(scope.row.id)"
            ></el-button>
          </template>
        </el-table-column> -->
      </el-table>
      <el-pagination class="pagination" @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[10, 20, 30, 40]" :page-size="pagesize" layout="total, sizes, prev, pager, next, jumper" :total="pagetotal"></el-pagination>
    </div>

    <!-- 查看组件 -->
    <examine :DialogVisibleMod="DialogVisibleExamine" :modData="examineData" :optionsZi="optionsZi" :searchOptionTable="searchOptionTable" :attributeOrder="searchData" @examineDialog="examineDialog"></examine>
  </div>
</template>
<script>
//引入组件
import {
  SearchCForL,
  searchComponents,
  searchComponentsCss,
  buttonhurdle,
  modificationi,
  examine,
  rightButtons,
  dictionaries,
  importXlsx,
} from '@/views/components/FLPage'
import exportXlsxOne from '@/views/components/FLPage/exportXlsxOne'
import {
  exprotXls,
  searchFlConCblog, //抄表记录
} from '@/api/admin/flnMeterReadingPandect/index'
export default {
  components: {
    buttonhurdle,
    modificationi,
    examine,
    searchComponents,
    searchComponentsCss,
    importXlsx,
    rightButtons,
    exportXlsxOne,
    dictionaries,
  },
  name: 'FlConMeterInfo',
  props: ['areaCodeq'],
  data() {
    return {
      importUrl: `/api/flConMeterInfo/importXls`,
      //搜索框
      suoS: {},
      //   搜索组件的数据
      searchData: [
        {
          EN: 'id',
          CN: '主键',
          value: '',
          type: 'input',
          option: [],
          Exp: '^.{3,20}$',
          err: '长度为3-20的所有字符!',
          result: true,
          sign: true,
          searchSign: false,
          addSign: false,
          tableSign: false,
          examineSign: false,
          examineDisabled: false,
          modificationSign: false,
          configurationSign: false,
        },
        {
          EN: 'concentrator',
          CN: '集中器编号',
          value: '',
          type: 'input',
          option: [],
          Exp: '^.{3,20}$',
          err: '长度为3-20的所有字符!',
          result: true,
          sign: true,
          searchSign: true,
          addSign: true,
          tableSign: true,
          examineSign: true,
          examineDisabled: false,
          modificationSign: true,
          configurationSign: true,
        },
        {
          EN: 'lastupdatetime',
          CN: '创建时间',
          value: '',
          type: 'date',
          option: [],
          Exp: '^.{3,20}$',
          err: '长度为3-20的所有字符!',
          result: true,
          sign: true,
          searchSign: true,
          addSign: true,
          tableSign: true,
          examineSign: true,
          examineDisabled: false,
          modificationSign: true,
          configurationSign: true,
        },
        {
          EN: 'num',
          CN: '管辖表数',
          value: '',
          type: 'input',
          option: [],
          Exp: '^.{3,20}$',
          err: '长度为3-20的所有字符!',
          result: true,
          sign: true,
          searchSign: false,
          addSign: false,
          tableSign: true,
          examineSign: true,
          examineDisabled: false,
          modificationSign: false,
          configurationSign: true,
        },
        {
          EN: 'communityCode',
          CN: '区域名称',
          value: '',
          type: 'select',
          option: [],
          Exp: '^.{3,20}$',
          err: '长度为3-20的所有字符!',
          result: true,
          sign: true,
          searchSign: false,
          addSign: false,
          tableSign: false,
          examineSign: false,
          examineDisabled: false,
          modificationSign: true,
          configurationSign: true,
          dictTable: {
            table: 'fl_community',
            id: 'code',
            name: 'name',
          },
        },
        {
          EN: 'cgs',
          CN: '抄见成功数',
          value: '',
          type: 'input',
          option: [],
          Exp: '^.{3,20}$',
          err: '长度为3-20的所有字符!',
          result: true,
          sign: true,
          searchSign: false,
          addSign: false,
          tableSign: true,
          examineSign: true,
          examineDisabled: false,
          modificationSign: false,
          configurationSign: true,
        },
        {
          EN: 'sbs',
          CN: '抄见失败数',
          value: '',
          type: 'input',
          option: [],
          Exp: '^.{3,20}$',
          err: '长度为3-20的所有字符!',
          result: true,
          sign: true,
          searchSign: false,
          addSign: false,
          tableSign: true,
          examineSign: true,
          examineDisabled: false,
          modificationSign: false,
          configurationSign: true,
        },
        {
          EN: 'cjl',
          CN: '抄见率',
          value: '',
          type: 'input',
          option: [],
          Exp: '^.{3,20}$',
          err: '长度为3-20的所有字符!',
          result: true,
          sign: true,
          searchSign: false,
          addSign: false,
          tableSign: true,
          examineSign: true,
          examineDisabled: false,
          modificationSign: false,
          configurationSign: true,
        },
      ],
      //添加弹窗的数据模型
      diaDataAdd: {
        yyqName: '',
        pqName: '',
        pqNum: '',
        BH: '',
      },
      //删除----Start--------------------------------------
      deleteDataList: [],
      //删除----End----------------------------------------

      //查看----Start--------------------------------------

      //查看的弹窗控制器
      DialogVisibleExamine: false,

      //查看的数据
      examineData: {},

      //查看----End----------------------------------------

      //表格数据
      //后端传来的数据
      dataAttribute: [],
      //表格选中
      multipleSelection: [],
      //分页
      currentPage: 1, //当前页
      pagesize: 10, //每页条数
      pagetotal: 0, //总条数,
      modelType: 'table',
      optionsZi: [],
      searchOptionTable: [],
      // 左侧搜索条件
      areaCodew: '',
    }
  },
  computed: {
    optionDatas() {
      return function (arr, val) {
        if (arr) {
          for (let i = 0; i < arr.length; i++) {
            if (arr[i].value == val) {
              return arr[i].label
            }
          }
        }
      }
    },
  },
  created() {
    this.forData(this.currentPage, this.pagesize, this.suoS)
  },
  methods: {
    // 搜索栏清空
    // clearSearch(msg){
    //   if (msg == '清空') {
    //   console.log(msg,'父组件');
    //   this.forData(this.currentPage, this.pagesize); //刷新列表
    //   }
    // },
    // 配置
    configuration(msg) {
      if (msg == '配置') {
        console.log(msg)
      }
    },
    // 重置
    emptySearch(msg) {
      if (msg == '重置') {
        this.suoS = {}
        let suoS = this.suoS
        this.forData(this.currentPage, this.pagesize, suoS)
      }
    },
    // 字典组件回调
    dictionariesCallBack([a = {}, b = {}]) {
      // 正常字典
      this.optionsZi = a
      // 跨表字典
      this.searchOptionTable = b
      this.forData(this.currentPage, this.pagesize, this.suoS)
    },
    //搜索
    sunS_F(msg) {
      if (msg == '搜索') {
        this.forData(1, 10, this.suoS) //刷新列表
      }
    },
    //查询组件回调
    searchCallBack(newData) {
      let obj = {}
      for (let i = 0; i < newData.length; i++) {
        obj[newData[i].EN] = newData[i].value
      }
      this.suoS = obj
    },
    //渲染数据初始
    forData(page, size, searchData) {
      searchData.communityCode = this.areaCodew ? this.areaCodew : ''
      searchFlConCblog(page, size, searchData).then((response) => {
        this.pagetotal = response.data.total
        this.dataAttribute = response.data.list
      })
    },
    //添加用户--新增表单组件传来的参数
    toAdd(addData) {
      let obj = {}
      for (let i = 0; i < addData.length; i++) {
        obj[addData[i].EN] = addData[i].value
      }
      addFlConMeterInfo(obj)
        .then((response) => {
          this.forData(this.currentPage, this.pagesize, this.suoS) //刷新列表
          this.$message({
            message: '添加成功',
            type: 'success',
          })
        })
        .catch(() => {
          this.$message.error('添加失败')
        })
    },
    //按钮栏传递了删除命令
    toDelete(orderstring) {
      this.$confirm('确认删除？')
        .then((_) => {
          let idArr = []
          for (let i = 0; i < this.deleteDataList.length; i++) {
            idArr.push(this.deleteDataList[i].id)
          }
          if (idArr.length == 0) {
            this.$message({
              message: '请选择要删除的数据',
              type: 'warning',
            })
            return
          }
          deleteFlConMeterInfo(idArr)
            .then((response) => {
              this.forData(this.currentPage, this.pagesize, this.suoS) //刷新列表
              this.$message({
                message: '删除成功',
                type: 'success',
              })
            })
            .catch((error) => {
              this.$message({
                message: '删除失败',
                type: 'warning',
              })
            })
        })
        .catch((_) => {})
    },
    //单项删除
    deleteList(id) {
      let arrId = [id]
      this.$confirm('确认删除？')
        .then((_) => {
          deleteFlConMeterInfo(arrId).then((response) => {
            this.forData(this.currentPage, this.pagesize, this.suoS) //刷新列表
            this.$message({
              message: '删除成功',
              type: 'success',
            })
          })
          done()
        })
        .catch((_) => {})
    },
    //查看
    makeExaId(id) {
      getFlConMeterInfo(id)
        .then((response) => {
          let copyDialog = true
          this.DialogVisibleExamine = copyDialog
          // console.log(response);
          this.examineData = response.data
        })
        .catch((error) => {
          alert('获取失败')
        })
    },
    //查看关闭弹窗
    examineDialog(dialogVisibleMod) {
      this.DialogVisibleExamine = false
    },

    //修改
    modifyData(value, modData) {
      if (value) {
        let id = modData.id
        modifyFlConMeterInfo(id, modData)
          .then((response) => {
            this.forData(this.currentPage, this.pagesize, this.suoS) //刷新列表
          })
          .catch((error) => {
            this.$message({
              message: '修改失败',
              type: 'warning',
            })
            this.forData(this.currentPage, this.pagesize, this.suoS) //刷新列表
          })
      } else {
        this.forData(this.currentPage, this.pagesize, this.suoS) //刷新列表
      }
    },
    //表格选中事件
    handleSelectionChange(val) {
      this.multipleSelection = val
      //传递删除的参数
      this.deleteDataList = val
    },

    //分页
    handleSizeChange(val) {
      console.log('每页 ' + val + ' 条')
      this.pagesize = val
      this.forData(this.currentPage, val, this.suoS)
    },
    handleCurrentChange(val) {
      console.log('当前页: ' + val)
      this.currentPage = val
      this.forData(val, this.pagesize, this.suoS)
    },
    // 序号
    indexMethod(index) {
      var currentPage = this.currentPage
      var pagesize = this.pagesize
      this.$nextTick(function () {
        currentPage = this.currentPage
        pagesize = this.pagesize
      })
      return currentPage * pagesize - pagesize + 1 + index
    },
    // 下载模板请求
    exprotXlsx: exprotXls,
    //downloadFile: downTem
    //工具栏组件传来的参数
    // FTableFunction(attributeOrderCloneTwiceL) {
    //   this.attributeOrder = attributeOrderCloneTwiceL;
    // },
  },
  watch: {
    areaCodeq(newValue) {
      this.areaCodew = newValue
      this.forData(1, 10, this.suoS) //刷新列表
    },
  },
}
</script>
<style scoped src="@/styles/allCssP.css"></style>
<style lang="scss" scoped>
.FlConMeterInfo {
  .shrinkBox {
    text-align: center;
    font-weight: 700;
    font-size: 20px;
    height: 25px;
    // border-bottom:1px solid #E6E6E6;
  }
  /deep/ .el-table--mini {
    .gutter {
      display: table-cell !important;
    }
    .el-checkbox__inner {
      width: 12px;
      height: 12px;
    }
    // 改变表头的高度  改为45px
    /deep/.el-table__header-wrapper {
      .el-table__header {
        .has-gutter {
          tr {
            th {
              padding: 5px 0 !important;
              height: 34px;
              line-height: 34px;
            }
            // .is-leaf{
            //   padding: 5px 0 !important;

            // }
          }
        }
      }
    }
    // 表头操作固定定位
    /deep/.el-table__fixed-right {
      .el-table__header {
        thead {
          tr {
            th {
              padding: 5px 0 !important;
              height: 34px;
              line-height: 34px;
              .cell {
                // padding-bottom: 5px !important;
                //   height: 34px;
                //   line-height: 34px;
              }
            }
          }
        }
      }
    }
    .el-table__body-wrapper {
      .el-table__header .has-gutter tr,
      .el-table__header .has-gutter th {
        padding: 0;
        height: 42px;
      }
      .el-table__body tr,
      .el-table__body td {
        padding: 0;
        height: 42px;
      }
    }
  }
  .right_row {
    display: flex !important;
    justify-content: start;
    align-items: center;
    .right_buttons {
      position: absolute;
      padding: 0px !important;
      right: 30px;
    }
    .buttonhurdle {
      padding: 0px !important;
    }
  }
  .do {
    display: flex;
  }
  .pagination {
    text-align: left;
    margin-top: 20px;
  }
}
</style>
